<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <input type="file" @change='change'>
    <div>
      进度: {{videoProgress}}
    </div>

  </div>
  <script src="https://cdn.staticfile.org/vue/2.6.11/vue.min.js"></script>
  <script src="./httpVueLoader.js"></script>
  <script src='./cos-js-sdk-v5.min.js'></script>
  <script src='https://cdn.staticfile.org/axios/0.19.2/axios.min.js'></script>
  <script>
    var cos = new COS({
      getAuthorization: function (options, callback) {
        // var url = 'http://wl.fangkeng.wang/api/test/test';
        var url = 'http://ht.fangkeng.wang/api/v1/cos5';
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.onload = function (e) {
          try {
            var data = JSON.parse(e.target.responseText);
            Bucket = data.Bucket;
            Region = data.Region;
          } catch (e) {
          }
          callback({
            TmpSecretId: data.credentials && data.credentials.tmpSecretId,
            TmpSecretKey: data.credentials && data.credentials.tmpSecretKey,
            XCosSecurityToken: data.credentials && data.credentials.sessionToken,
            ExpiredTime: data.expiredTime,
          });
        };
        xhr.send();
      }
    });
    var app = new Vue({
      el: '#app',
      data: {
        videoProgress: 0
      },
      methods: {
        change(e) {
          const file = e.target.files[0]
          this.txCOSUpload(file, 'video', 'video').then(pos => {
            console.log(pos, 'pos')
          })
        },
        txCOSUpload(formData, fileName, fileType) {
          const that = this
          return new Promise((resolve, reject) => {
            axios.get('http://ht.fangkeng.wang/api/v1/cos5').then(pos => {
              const data = pos.data
              const Region = data.Region
              const Bucket = data.Bucket
              // const CDN = data.Bucket
              cos.sliceUploadFile(
                {
                  Bucket,
                  Region,
                  Key:
                    `${fileName}/` +
                    new Date().getTime() +
                    Math.floor(Math.random() * 50),
                  Body: formData,
                  onHashProgress: function (progressData) {
                    console.log('校验中', JSON.stringify(progressData))
                  },
                  onProgress: function (progressData) {
                    const progress =
                      Math.round(
                        (progressData.loaded / progressData.total) * 10000
                      ) / 100
                    if (fileType === 'img') {
                      that.imgProgress = progress
                    } else if (fileType === 'video') {
                      that.videoProgress = progress
                    }
                    // , JSON.stringify(progressData)
                    console.log('上传中', progressData.percent, progressData.speed)
                  }
                },
                (err, data) => {
                  if (err) {
                    reject(err)
                  } else {
                    resolve(data)
                  }
                }
              )
            })
          })
        }
      },
    })
  </script>
</body>

</html>